<!DOCTYPE html>
<?php
require_once "DAL/DA_Canciones.php";
require_once "BE/BECancion.php";

$query = "";
if (isset($_REQUEST['q'])) {
    $query = $_REQUEST['q'];
    if ($query != "") {
        //Automatic Search
    }
}
?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/reset.css" />
        <!--http://jqueryui.com/themeroller/#!zThemeParams=5d000001004e0a000000000000003d8888d844329a8dfe02723de3e5701cc8cb8a0f4166c8f002bb384a9a94d46b66930ecd1d30314057ff273da42b76034e7df160b9e7ba7002682805fc5802b2a0549efda864da8b438712e9bef7a29f310d784ca8e76257cb286297169539eeedb3e8f658db61c6d1139978bee0dfabb101c4e5f2a22e626676ff42a3d86588f21e92b97dc1a7f59d187197d4517d72c75e239a14d6957ba302c233ae056a4e131bdc3ebaa7f66386dde98c27495c2d62816185d8b730aee21010f7a6a55c2f1b271c731b57956c2c35fc1c44ed0f6e638cd15a7092efe1bbadffd30e09e61616b3f2e1137ae59ca794e3afa7e556985ae3fbbd9e3bc8a21438703c1480f49e7d06d1a595b7bf3331672042929df0bf096760aab9da58626a6c9c68382f77915f141b9f3105c44ad1b89d771afb3af98071ffa29ae31d4f9e2bcad76c80b6eed876e977209e25e549b2af79d7b5f2cad531367fec865660867d4e4c760dccbe01e8455c6c7e090c17e5d5babb08b0033161f611ad5fbde59c8a7a8594f5b30b5784856f3a66801c442f885501bbe47e14983d485d79eb9b2b6e5069cbdd15380dd70c274d123327a6778dcaed52ec3aa0b730ed886c7cecf486946e6f40d732d9d05a589c0ee3604f8bfd59215f2da0a5725f03369616a931f010a0296cdad4c7bc5f6c686427063f3b45c436e036bd5784a3c0170a1e48aae49a88ed39a51c411b661942a5130807ab52b9c73134b4ec48bfdb97d663ba0c3fb26f6beda2b0ab111c828f4b334b1138ae4b518c0bd75f26d4d467e879532d4fda809d5e7473f8dbf8b90972a045674f3f353679f739ad5e0ed6d7eadb55cc92ab6bde9b0515c318ed71e4b397c6aa0decd96bb0cf885ca0992a852db9613ccdb21d15c22a4429f458a775f083157cbdef5d1c68c0dd29cec041e999b2a1610ea23fe74a9423e930fe1390b9429bbc5f5eb8e0c702d81384798e93734e66380c3131584d0826c9d3286990f2fb0528ef5b6a4da38337da31434a3d044c3a528a5eb89a1b3adf80a4f22f31d2dc09b42deaa0a8193b475249daf98670f588be8c138dba6a72f2c009f4177e92a5d9886861c126f08e0e84b50febb5473c992e215191f83c0ff41e3f25f064f0dab93e8212978201d8b11997909b3890e50bce7c3e489f567bd2dc32cf3c79a768efb7a9f61018ea6a7799e3dc40477323a5305640ce74ba890583b3b9e41104a4f217161938112a27f61a0e059ec4c6b6b0010594d60bed4b98e2c9f21d59c6e8d2757f5901d9778e6d67e9d3c4e4a82a50f2f17212cdb80cbe083e3350900e3209c8c654ebf1ec38313ada3e6289d3ad55a0657a3f1667142bb5b0375c8702c4c3e45d8136f59603402696fd200a8c47ebf7c92a205251c7183a09df3379f25b9b4af0c605aa339c4010a7e37f757dee814d1e371b077838fbc404a5a2aa8d868d6549fdc7547b66e069f82d513a8f9c57eb094674608819188f5ac62ad696a9fda92ebf77cd9df6d40943b536a81dd795fcdae766ae3fe235d31890a8d7123790fd113bfaf7c438fdc552fd-->
        <link rel="stylesheet" href="css/dark-custom/jquery-ui-1.10.1.custom.min.css" />
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
        <script type="text/javascript" src="js/jn.msieplaceholder.jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                $("#menu").menu();
                fixPlaceHolder();
                setResizeBehavior();
                setSearchBoxInteraction();
                executeQSSearch();

                /*----------------------------------------------------------------------------*/
                /* DOC.READY CLOSURE FUNCTIONS*/

                function getHashQuery() {
                    var hash = window.location.hash;
                    console.debug(hash);
                    var qryIdx = hash.indexOf('qry=');
                    if (qryIdx >= 0) {
                        var parameters = hash.split("&");
                        for (var i = 0; i < parameters.length; i++) {
                            var keyValuePair = parameters[i].split("=");
                            if (keyValuePair[0] === '#qry') {
                                var queryValue = keyValuePair[1];
                                return queryValue;
                            }
                        }

                    }
                    return "";
                }

                function setSearchBoxInteraction() {
                    var timer; //this timer will wait for some seconds before beginning the search...

                    //KEY UP EVENT
                    $('#txtBusquedaDeCancion').keyup(function() {
                        if (this.value.length > 2) {
                            setTimerUp();
                        } else {
                            showInstructionsBox();
                        }
                    });

                    //CLICK EVENT
                    $('#txtBusquedaDeCancion').click(function() {
                        window.location.hash = $("#txtBusquedaDeCancion").val();
                        if (this.value.length > 2) {
                            setTimerUp();
                        } else {
                            showInstructionsBox();
                        }
                    });

                    function setTimerUp() {

                        if (timer)
                            clearTimeout(timer);

                        timer = setTimeout(function() {
                            showSearchResultsBox();
                            executeSearch();

                        }, 400);
                    }
                }
                function setResizeBehavior() {
                    adjustOnResize();

                    $(window).on("resize", function() {
                        adjustOnResize();
                    });
                }

                function adjustOnResize() {

                    var windowHeight = $(window).height();
                    var windowWidth = $(window).width();
                    var workSpaceWidthLimit = 295;
                    var newWorkspaceWidth = windowWidth - workSpaceWidthLimit;
                    var heightLimit = 150;
                    var newHeight = windowHeight - heightLimit;

                    $("#workspace").css("width", newWorkspaceWidth);

                    $("#workspace").css("height", newHeight);
                    $("#left-bar").css("height", newHeight);
                }

                function executeSearch() {

                    var searchContent = $("#txtBusquedaDeCancion").val();

                    setQueryStringHash(searchContent);

                    var url = "proc_buscar_canciones.php";
                    var parameters = {searchText: searchContent};

                    $.ajax({
                        url: url,
                        data: parameters,
                        success: function(e) {
                            $("#divSearchResults").html(e);
                        }
                    });
                }

                function executeQSSearch() {
                    var queryValue = getHashQuery();
                    $("#txtBusquedaDeCancion").val(queryValue);
                    if (queryValue.length > 2) {
                        showSearchResultsBox();
                        executeSearch();
                    }
                }

                function fixPlaceHolder() {
                    $("#txtBusquedaDeCancion").placeholderForIE();
                }

                function showSearchResultsBox() {
                    $("#divExplanation").fadeOut(function() {
                        $("#divSearchResults").fadeIn();
                    });
                }

                function showInstructionsBox() {
                    $("#divSearchResults").fadeOut(function() {
                        $("#divExplanation").fadeIn();
                        $("#divSearchResults").html("Buscando...");
                    });
                }

                function setQueryStringHash(searchText) {
                    window.location.hash = "qry=" + searchText;
                }
            });
        </script>
        <title>Cantos de La Misa 2.0</title>
    </head>
    <body>
        <div class="heading-bar">
            <div class="main-title">Cantos de La Misa</div>
            <span class="page-title">Búsqueda de Canciones</span>
            <span class="user-link">Entrar | Registrarse</span>
        </div>
        <div id="left-bar" class="left-bar ui-widget ui-widget-content ui-corner-all">
            <?php include 'includes/menu.php'; ?>
            <img class="page-image" src="images/canciones.png" style="margin:15px 0 0 0">
        </div>
        <div id="workspace" class="workspace ui-widget ui-widget-content ui-corner-all">
            <input id="txtBusquedaDeCancion" type="search" style="width:99%" placeholder="Digita aquí parte del nombre, letra o tipo de la canción que buscas…" value="<?php echo $query; ?>">
            <br /><br />
            <div id="divSearchResults" style="display:none">Buscando...</div>
            <div id="divExplanation" class="ui-widget-header">
                <p>Utiliza esta sección para buscar canciones de nuestro catálogo. Solamente digita en la caja de texto arriba parte del nombre, de la letra, momento de la misa o tema de la canción.</p>
                <p>
                    Ejemplos:
                <ul style="margin: 0 0 0 25px; list-style-type:disc ">
                    <li><a target="_blank" href="canciones.php#qry=Vino Pan">Vino Pan</a></li>
                    <li><a target="_blank" href="canciones.php#qry=Cancion Alegría">Canción Alegría</a></li>
                    <li><a target="_blank" href="canciones.php#qry=Vida Eterna">Vida Eterna</a></li>
                    <li> Por Momentos de la Misa:
                        <ul style="margin: 0 0 0 25px; list-style-type:disc ">
                            <li><a target="_blank" href="canciones.php#qry=Momento:Entrada">Momento: Entrada</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Ten Piedad">Momento: Ten Piedad</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Gloria">Momento: Gloria</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Aleluya">Momento: Aleluya</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Ofrendas">Momento: Ofrendas</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Santo">Momento: Santo</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Cordero">Momento: Cordero</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Comunion">Momento: Comunión</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Momento:Salida">Momento: Salida</a></li>
                        </ul>
                    </li>
                    <li> Por Tipos de Liturgia:
                        <ul style="margin: 0 0 0 25px; list-style-type:disc ">

                            <li><a target="_blank" href="canciones.php#qry=Liturgia: Vigilia Pascual">Liturgia: Vigilia Pascual</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Liturgia: Cuaresma">Liturgia: Cuaresma</a></li>
                            <li><a target="_blank" href="canciones.php#qry=Liturgia: Funeral">Liturgia: Funeral</a></li>
                        </ul>
                    </li>

                </ul>
                </p> 
            </div>
        </div>
        <div class="footer" >
            <p style="position:static;bottom:3px ;font-size:0.8em;text-align:justify;margin:10px 10px">(*) Nos reservamos el derecho de admisión. Las canciones se publican tal cual las hemos aprendido. Este sitio presta servicios tal como son; la afiliación no garantiza su funcionamiento constante ni garantiza la ausencia de errores, tanto en el funcionamiento del sitio como en las canciones. Respetamos los derechos de autor: Si usted considera que su canción no debe estar aquí, háganoslo saber y con gusto la removeremos de manera expedita.</p>
            Copyright (c) - Jose Angel Nunez - Costa Rica - Todos los Derechos Reservados</div>
    </body>
</html>
